<template>
  <div style="margin-top: 20px">
    <h5>{{ $t("business.configuration.metrics_selector") }}</h5>
    <table
      v-if="matchExpressions && matchExpressions.length > 0"
      style="width: 100%; padding: 0"
      class="tab-table"
    >
      <tr>
        <th scope="col" width="30%" align="left">
          <label>{{ $t("business.workload.key") }}</label>
        </th>
        <th scope="col" width="30%" align="left">
          <label>{{ $t("business.workload.operator") }}</label>
        </th>
        <th scope="col" width="30%" align="left">
          <label>{{ $t("business.workload.value") }}</label>
        </th>
        <th align="left" />
      </tr>
      <tr v-for="(row, index) in matchExpressions" v-bind:key="index">
        <td>
          <el-input v-model="row.key" />
        </td>
        <td>
          <el-select
            v-model="row.operator"
            style="width: 100%"
            @change="onChangeOperator(row)"
          >
            <el-option label="=" value="In" />
            <el-option label="≠" value="NotIn" />
            <el-option label="Exists" value="Exists" />
            <el-option label="Dose Not Exist" value="DoesNotExist" />
          </el-select>
        </td>
        <td>
          <el-input
            v-if="row.operator === 'In' || row.operator === 'NotIn'"
            v-model="valueStrings[index]"
            @change="onConditionChange(row, index)"
          />
          <span v-else>...</span>
        </td>
        <td>
          <el-button
            type="text"
            style="font-size: 10px"
            @click="onConditionDelete(index)"
          >
            {{ $t("commons.button.delete") }}
          </el-button>
        </td>
      </tr>
    </table>
    <el-button style="margin-top: 5px" @click="addRule()">
      {{ $t("commons.button.add") }}{{ $t("business.workload.rule") }}
    </el-button>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

const matchExpressions = defineModel<any>("matchExpressions");

const valueStrings = ref([]);

const initData = () => {
  if (matchExpressions.value && matchExpressions.value.length > 0) {
    for (let i = 0; i < matchExpressions.value.length; i++) {
      const mach = matchExpressions.value[i];
      if (mach.values && mach.values instanceof Array) {
        let valueString = "";
        for (let j = 0; j < mach.values.length; j++) {
          if (j + 1 !== mach.values.length) {
            valueString = valueString + mach.values[j] + ",";
          } else {
            valueString = valueString + mach.values[j];
          }
        }
        valueStrings.value.push(valueString);
      } else {
        valueStrings.value.push("");
      }
    }
  }
};

const onConditionChange = (rowObject, index) => {
  if (valueStrings.value[index].indexOf(",") > 0) {
    rowObject.values = valueStrings.value[index].split(",");
  } else {
    rowObject.values.push(valueStrings.value[index]);
  }
};

const onConditionDelete = index => {
  valueStrings.value.splice(index, 1);
  matchExpressions.value.splice(index, 1);
};

const onChangeOperator = row => {
  if (row.operator === "In" || row.operator === "NotIn") {
    row.values = [];
  } else {
    delete row.values;
  }
};

const addRule = () => {
  matchExpressions.value.push({
    key: "",
    operator: "In",
    values: []
  });
  valueStrings.value.push("");
};

onMounted(() => {
  initData();
});
</script>

<style scoped></style>
